<template>
  <div style="height:100%;width:100%;">
    <div id="mapCanvas" style="height:100%;width:100%;" ref="mapCanvas"></div>
  </div>
</template>

<script>
// import numeral from "numeral";
const mapJson = require("./zjMap.json");

export default {
  name: "mapCanvas",
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    data: {
      type: Array,
    },
    mapSelectChange: {
      type: Function,
    },
  },
  watch: {
    data(val) {
      this.init(val);
    },
  },
  // mounted() {
  //   this.init();
  // },
  methods: {
    init(val) {
      let jsonName = mapJson;
      this.$echarts.registerMap("浙江省", jsonName);
      this.myChart = this.$echarts.init(this.$refs.mapCanvas);
      var COLORS = ["#ff4400", "#FEB24D", "#7CD334"];

      let mapsData = val.map((i) => {
        return {
          name: i.areaName + "市",
          value: i.value,
          areaId: i.areaId,
        };
      });

      let option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            var html = `
              <span  style="font-size:12px">${params.name}:${params.value}</span>
              
              `;
            return html;
          },
        },
        visualMap: {
          type: "piecewise",
          inverse: true,
          bottom: "5%",
          right: "20%",
          pieces: [
            { min: 0, max: 60, label: "<60分【不合格】", color: COLORS[0] },
            { min: 60, max: 80, label: "60-80分【良好】", color: COLORS[1] },
            { min: 80, label: ">80分【优秀】", color: COLORS[2] },
          ],
          inRange: {
            color: COLORS,
          },
        },

        series: [
          {
            type: "map",
            map: "浙江省",
            zoom: 1.1,
            // silent: true,
            aspectScale: 0.8,
            label: {
              show: true,
              // position: ["50%", "50%"],
              rotate: 30,
              fontSize: "12",
              fontWeight: "500",
              // color: "#000",
              // formatter: (params) => {
              //   return params.name + "\n" + (params.value || 0);
              // },
            },
            itemStyle: {
              normal: {
                //未选中状态
                borderWidth: 1, //边框大小
                borderColor: "#BFBFBF",
                // areaColor: "red", //背景颜色
                label: {
                  show: true, //显示名称
                },
              },
            },

            data: mapsData,
            // data: [
            //   { name: "杭州市", value: 4822023 },
            //   { name: "宁波市", value: 22 },
            //   { name: "温州市", value: 33 },
            //   { name: "嘉兴市", value: 44 },
            //   { name: "湖州市", value: 55 },
            //   { name: "绍兴市", value: 66 },
            //   { name: "金华市", value: 66 },
            //   { name: "衢州市", value: 66 },
            //   { name: "舟山市", value: 66 },
            //   { name: "台州市", value: 66 },
            //   { name: "丽水市", value: 66 },
            // ],
          },
        ],
      };
      this.myChart.setOption(option);
      var _this = this;
      this.myChart.on("click", function (params) {
        console.log(params);
        let id = params.data.areaId;
        _this.mapSelectChange(id);
        // _this.myChart.dispatchAction({
        //   type: "downplay", // 取消高亮指定的数据图形
        //   seriesIndex: 0,
        // });
        // _this.myChart.dispatchAction({
        //   type: "highlight", // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
        //   seriesIndex: 0,
        //   name: params.name,
        // });
      });

      setTimeout(function () {
        window.addEventListener("resize", () => {
          _this.myChart.resize();
        });
      }, 500);
    },
  },
};
</script>

<style>
</style>
